<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础练习4</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for:="item in students" :key="item.id"> {{item.name}} </li>
        </ul>
        <ul>
            <li v-for:="(item,index) in students"> {{index}}-{{item.name}} </li>
        </ul>
        <ul>
            <li v-for:="val in obj"> {{val}}</li>
        </ul>
        <ul>
            <li v-for:="(val,attr) in obj"> {{attr}}:{{val}}</li>
        </ul>
    </div>
    <script src="./vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return {
                   students:[
                    {id:1,name:"zhangsan",age:20},
                    {id:2,name:"lisi",age:23},
                    {id:3,name:"wangwu",age:24},
                   ],
                   obj:{
                    a:1,b:2,c:3
                   }
                }
            }
        });
        app.mount('#app');
    </script>
</body>

</html>